<template>
  <div>
    <el-group-title class="d_jump" index="addInformation">
      <template slot="groupTitle">
        <el-form :model="form" ref="form" label-width="160px" class="ccui-form">
          <el-row>
            <el-col :span="20">
              <el-form-item
                class="el-form-item-textarea ellipsis-3"
                label="冲销原因："
                prop="writeoffReason"
                :title="form.writeoffReason"
              >
                <span>{{ form.writeoffReason }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                class="el-form-item-box"
                label="填报单位："
                prop="reportInOrgName"
              >
                <span>{{ form.reportInOrgName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                class="el-form-item-box"
                label="冲销单编号："
                prop="writeoffCode"
              >
                <span>{{ form.writeoffCode }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item
                class="el-form-item-box"
                label="冲销单名称："
                prop="writeoffName"
              >
                <span>{{ form.writeoffName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                class="el-form-item-box"
                label="冲销期间："
                prop="reversal"
              >
                <span>{{ form.writeoffStart }}至{{ form.writeoffEnd }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item
                class="el-form-item-box"
                label="结算单编号："
                prop="settlementCode"
              >
                <span>{{ form.settlementCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                class="el-form-item-box"
                label="结算单名称："
                prop="settlementName"
              >
                <span>{{ form.settlementName }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item
                class="el-form-item-box"
                label="合同编号："
                prop="contractCode"
              >
                <span>{{ form.contractCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                class="el-form-item-box"
                label="合同名称："
                prop="contractName"
              >
                <span>{{ form.contractName }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item
                class="el-form-item-box"
                label="供应商："
                prop="supplierName"
              >
                <span>{{ form.supplierName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                class="el-form-item-box"
                label="合同金额："
                prop="contractMoney"
              >
                <span>{{ form.contractMoney }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                class="el-form-item-box"
                label="冲销金额："
                prop="writeoffMoney"
              >
                <span>{{ form.writeoffMoney }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                class="el-form-item-box"
                label="运输产品类别："
                prop="transportProductName"
              >
                <span>{{ form.transportProductName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                class="el-form-item-box"
                label="编制人："
                prop="reportUsername"
              >
                <span>{{ form.reportUsername }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                class="el-form-item-box"
                label="编制日期："
                prop="reportTime"
              >
                <span>{{ form.reportTime }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="20">
              <el-form-item
                label="备注："
                prop="remarks"
                class="el-form-item-textarea ellipsis-3"
                :title ="form.remarks"
              >
                <span>{{ form.remarks }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </el-group-title>
  </div>
</template>

<script>
export default {
  name: "detailInformation.vue",
  props: {
    dataInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      form: {
        reason: "",
        unit: "",
        code: "",
        dName: "", //计量编码
        contractName: "", //合同名称
        contractId: "",
        measurePeriod: "", //计量期次
        measureBeginData: "", //计量开始日期
        measureEndData: "", //计量截至日期
        jCode: "",
        jName: "",
        supply: "", //税率
        contractMoney: 0,
        currMeasureAmount: "", //本期计量金额
        amount: "", //不含税金额
        tax: "", //税额
        currPayAmount: "", //支付金额
        totalMeasure: "", //开累计量金额
        totalCollection: "", //开累支付金额
        editPerson: "",
        editDate: "",
        remake: "", //备注
        version: "", //版本号
      },
      hobbyList: [],

      taxRateList: [],
    };
  },

  methods: {},
  watch:{
    dataInfo(data){
      this.form = data
    }
  }
};
</script>

<style scoped lang="scss">
.el-input /deep/ input.el-input__inner {
  width: 260px;
  height: 30px;
  border-radius: 4px;
}
.el-form-item-box {
  float: left;
  margin-right: 60px;
  width: 100%;
}
.ccui-form .ccui-form-shortInput {
  width: 260px;
}
.ccui-form .ccui-form-textArea,
.ccui-form .ccui-form-textArea .el-textarea {
  width: 760px;
  min-height: 100px;
}
.el-form-item-textarea {
  float: left;
  width: 100%;
}
/deep/.ccui-form .el-form-item__label {
  // width: 101px !important;
  height: 30px;
  font-size: 13px;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #4a4a4a;
  line-height: 29px;
}
// /deep/.ccui-form .el-form-item__content {
//   margin-left: 101px !important;
//   // overflow: hidden;
//   // white-space: nowrap;
//   // text-overflow: ellipsis;
// }
/deep/.el-col-13 .el-form-item__content {
  margin-left: 101px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
</style>
